<template>
	<view>
		<!-- 头部 -->
		 <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="新增回库申请" left-icon="left" right-text="提交" @clickLeft="backFn" @clickRight="btnOkFn">        </uni-nav-bar>
		 <u--form class="form" labelPosition="left" labelWidth="100px" :model="form" :rules="rules" ref="form">
			
			 <u-form-item @click="openOrderProp" label="租赁订单" prop="orderNo" borderBottom ref="item1">
			 	<u--input :readonly="true" v-model="form.orderNo" border="none" placeholder="选择租赁订单"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			 </u-form-item>
			 <u-form-item label="回货申请单编号" prop="returnApplyNo" borderBottom ref="item1">
			 	<u--input v-model="form.returnApplyNo" border="none" placeholder="回货申请单编号"></u--input>
			 				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			 </u-form-item>
			 <u-form-item @click="show=1" label="退回货类型" prop="returnTypeDou" borderBottom ref="item1">
			 	<u--input v-model="form.returnTypeDou" border="none" placeholder="退回货类型"></u--input>
			 				<u-icon slot="right" name="arrow-right"></u-icon>
			 </u-form-item>
			<u-form-item label="业务员" prop="sponsorName" borderBottom ref="item1">
				<u--input v-model="form.sponsorName" border="none" placeholder="请填发起人名称"></u--input>
							<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			 <u-form-item label="客户名称" prop="customerName" borderBottom ref="item1">
			 	<u--input v-model="form.customerName" border="none" placeholder="请填写客户名称"></u--input>
			 				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			 </u-form-item>
			 <u-form-item label="项目名称" prop="projectName" borderBottom ref="item1">
			 	<u--input v-model="form.projectName" border="none" placeholder="请填写项目名称"></u--input>
			 				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			 </u-form-item>
			 <u-form-item @click="adressFn" label="项目地址" prop="loadingAddress" borderBottom ref="item1">
			 	<u--input v-model="form.loadingAddress" border="none" placeholder="项目地址"></u--input>
			 				<u-icon slot="right" name="arrow-right"></u-icon>
			 </u-form-item>
			 <u-form-item>
				 <view class="address">
				 	<u-textarea  v-model="form.loadingAddress" style="width:100%;height:80px;">
				 	</u-textarea>
				 	<u-icon class="icon" name="map" @click="addAddress"></u-icon>
				 </view>
			 </u-form-item>
			
			 <u-form-item label="对接人名称" prop="contactName" borderBottom ref="item1">
			 	<u--input v-model="form.contactName" border="none" placeholder="请填写对接人名称"></u--input>
			 				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			 </u-form-item>
			 <u-form-item label="联系电话" prop="contactTelephone" borderBottom ref="item1">
			 	<u--input v-model="form.contactTelephone" border="none" placeholder="请填联系电话"></u--input>
			 				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			 </u-form-item>
			 <u-form-item @click="show=3" label="装货日期" prop="finalFollowTime" borderBottom ref="item1">
			 	<input type="text" :disabled="true" v-model="form.loadingDate">
			 	<u-icon slot="right" name="arrow-right"></u-icon>
			 </u-form-item>
			 <u-form-item @click="show=4" label="是否需要安排车辆" prop="whetherLogisticsRequiredDou" borderBottom ref="item1">
			 	<u--input v-model="form.whetherLogisticsRequiredDou" :disabled="true" disabledColor="#fff" border="none" placeholder="是否需要安排车辆"></u--input>
			 				<u-icon slot="right" name="arrow-right"></u-icon>
			 </u-form-item>
			 <u-form-item label="备注" prop="collaboratorName" borderBottom ref="item1">
			 	<u--input v-model="form.remark" border="none" placeholder="备注"></u--input>
			 				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			 </u-form-item>
			 <u-form-item @click="show=6" label="回货仓库" prop="warehouseName" borderBottom ref="item1">
			 	<u--input v-model="form.warehouseName" disabledColor="#fff"  :disabled="true" border="none" placeholder="请选择仓库"></u--input>
			 				<u-icon slot="right" name="arrow-right"></u-icon>
			 </u-form-item>
			 <u-form-item label="回库产品" prop="productList" borderBottom ref="item1">
			 	 
			 </u-form-item>
			  
			<view class="box" v-if="this.form.parentId !==0">
				<view class="boxTop">
					<view class="">产品名称</view>
					<view class="">型号</view>
					<view class="">数量</view>
					<view class="">操作</view>
				</view>
				<view class="boxValue" v-for="(item,index) in form.productList" :key="index">
					<view class=""><u--input v-model="item.productName" type="text"></u--input></view>
					<view class=""><u--input v-model="item.model" type="text"></u--input></view>
					<view class=""><u--input @blur='isQuantity(item,index)' type="text" v-model="item.returnQuantity"></u--input></view>
					<view class="" style="width: 25%;text-align: center;font-size: 15px;color: red;">删除</view>
				</view>
			</view>
		 </u--form>
		 <!-- 时间选择 -->
		 <u-datetime-picker   :closeOnClickOverlay="true" @close="show=false" @cancel="show=false" @confirm="Time"
		                :show="show==3"  v-model="dateNow"  mode="date"></u-datetime-picker>
		  <u-picker  :closeOnClickOverlay="true" @close="show=false" :show="show==1" :columns="returnTypeOptions" keyName="dictLabel"@cancel="show=false" @confirm="checkedFn"></u-picker>
		  <!-- 选择地址 -->
		  <uni-data-picker @popupclosed="show=false" class="picker" v-if="show==2" v-model="form.adress" :localdata="adresslist"
		   popup-title="选择地址"@change="onchange"   ref="adress"></uni-data-picker>
		   <u-picker  :closeOnClickOverlay="true" @close="show=false" :show="show==4" :columns="carRequired" keyName="dictLabel"   @cancel="show=false" @confirm="checkedFn"></u-picker>
		   <!-- 选择仓库 -->
		   <u-picker  :closeOnClickOverlay="true" @close="show=false" :show="show==6" :columns="warehouseOption" keyName="warehouseName"   @cancel="show=false" @confirm="warehouseBtn"></u-picker>
		   <!-- 弹出层 -->
		   <u-popup :closeable="true" :show="show==5" mode="right" overlayStyle="margin-top:44px" customStyle="margin-top:44px"  @close="show=false" >
		           <view class="rightBox">
		              <u-cell >
		              	<template #title>
		              		<view style="font-size: 14px;color: #fd9540;min-width:200px;">请选择租赁订单</view>
		              	</template>
		              </u-cell>
		              <u-cell title="客户名称">
		              	<template #value>
		              		<navigator url="/pages/dialog/customer" open-type="navigate">
		              				<view v-if="OrderFormData.customerName">{{OrderFormData.customerName}}</view>
		              		        <view v-else>请选择</view>
		              		</navigator>
		              	</template>
		              </u-cell>
		              <u-cell class="bg" title="订单状态"  @click="orderTypeShow=true" >
		              	<template #value>
							<view v-if="OrderFormData.orderStatus=='0'">市场部待审批中</view>
							<view v-if="OrderFormData.orderStatus=='8'">财务部待审批</view>
		              		<view v-if="OrderFormData.orderStatus=='1'">待发货</view>
							<view v-if="OrderFormData.orderStatus=='7'">发货中</view>
		              		<view v-if="OrderFormData.orderStatus=='2'">已出库</view>
							<view v-if="OrderFormData.orderStatus=='9'">申请中</view>
		              		<view v-if="OrderFormData.orderStatus=='3'">已申请</view>
							<view v-if="OrderFormData.orderStatus=='10'">入库中</view>
		              		<view v-if="OrderFormData.orderStatus=='4'">已入库</view>
		              		<view v-if="OrderFormData.orderStatus=='5'">已结算</view>
							<view v-if="OrderFormData.orderStatus=='6'">已完结</view>
		              	    <view  v-if="!OrderFormData.orderStatus" style="color: #c3c3c3;">请选择</view>
		              	</template>
		              </u-cell>
		              <u-cell >
		              	<template #title>
		              		<u-button text="查询" @click="SearchOrderNo"></u-button>
		              	</template>
		              </u-cell>
		              <!-- 租赁订单的列表 -->
					  <scroll-view  :scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" >
						  <view class="right-list" v-for="item in orderList">
								<view>订单编号:{{item.orderNo}}</view>
								<view>客户名称:{{item.customerName}}</view>
								<view>业务员:{{item.salesmanName}}</view>
								<view>订单创建时间:{{item.orderDate}}</view>
								<view class="button"  @click="checked(item)">选择</view>
						  </view>
						  <view v-if="this.orderList.length==this.orderTotal  && this.orderList.length!==0">沒有更多了</view>
					  </scroll-view>
		           </view>
		   	</u-popup>
			<u-toast ref="uToast"></u-toast>
			<!-- 订单状态 -->
			<u-action-sheet :actions="orderTypeOptions" @close="orderTypeShow=false" title="租赁订单状态" @select="selectFn" :show="orderTypeShow"></u-action-sheet>
	        <u-modal showConfirmButton showCancelButton @confirm="BtnModel" @cancel="BtnShow=false" width="250px" :show="BtnShow" title="提示" >
				<view class="slot-content">
					<rich-text nodes="是否确认提交?"></rich-text>
				</view>
			</u-modal>
	</view>
</template>

<script>
	import{addBackWarehouseApi,getBackWarehouseInfoApi,getChildNo} from '@/api/backapplication.js';
	import { getDicts } from '@/api/dictionary/index.js';
	import {provinceNameList} from '@/api/region/region.js';
	import {listOrder}from '@/api/order/order.js'
	import {listWarehouse} from '@/api/warehouse/warehouse.js'
import { login } from '../../../api/login';
	export default {
		data() {
			return {
				form:{
					pageSize:10,
					pageNum:1,
					parentId: 0,//	是	Long	父级申请单id,第一次申请不传此属性或者传0
					returnApplyNo: '',//	是	String	回货单编号
					returnType: '1',//	是	String	回货/退货类型
					returnTypeDou:'回货',
					sponsor: '',//	是	Long	发起人
					sponsorName: '',//	是	string	发起人名称
					customerId: '',//	是	Long	客户
					customerName: '',//	是	string	客户名称
					orderId: '',//	是	Long	租赁销售订单
					orderNo: '',//	是	string	订单编号
					loadingAddressProvince: '',//	是	String	装货地址省份
					loadingAddressCity: '',//	是	String	装货地址市
					loadingAddressAre: '',//a	是	String	装货地址区
					loadingAddress: '',//	是	String	装货地址详细信息
					contactName: '',//	是	String	对接人名称
					contactTelephone: '',//	是	String	联系电话
					loadingDate: '',//	是	date	装货日期
					whetherLogisticsRequired: '',//	是	Long	是否需要物流安排车辆
					collaborator: '',//	是	string	协同人
					collaboratorName: '',//	是	BigDecimal	协同人名称
					remark: '',//	是	string	备注
					totalDailyRent: '',//	是	string	日租金合计
					shippingType: '',//	是	string	运输方式
					driverName: '',//e	是	string	司机姓名
					driverTel: '',//el	是	string	司机联系方式
					vehicleInformation: '',//	是	string	车辆信息
					warehouseId: '',//是	string	仓库id
					warehouseName: '',//e	是
					productList: [],
					salesman:'',
					salesmanName:'',
				},
				// 存储产品信息
				productQuantityList:[],
				OrderFormData:{
					pageSize: 10,
					pageNum: 1,
					customerId:'',
					customerName:'',
					orderStatus:'2',
				},//订单数据
				orderTotal:'',
				orderList:[],//租赁订单
				OrderOptions:[],
				show:false,
				orderTypeShow:false,//租赁订单的状态
				returnTypeOptions:[],//退回货类型
				adresslist:[],
				carRequired:[],
				warehouseOption:[],//仓库
				orderTypeOptions:[],//订单状态
				dateNow:'',//当前时间
				rules:{
				  'orderNo':{type: 'string',required: true,message: '请选择租赁订单',trigger: ['blur', 'change']},
				  'returnApplyNo':{type: 'string',required: true,message: '请回货申请单编号',trigger: ['blur', 'change']},
				  'returnTypeDou':{type: 'string',required: true,message: '请选择退回货类型',trigger: ['blur', 'change']},
				  'sponsorName':{type: 'string',required: true,message: '请填写发起人名称',trigger: ['blur', 'change']},
				  'customerName':{type: 'string',required: true,message: '请填写客户名称',trigger: ['blur', 'change']},
				  'loadingAddress':{type: 'string',required: true,message: '请选择客户地址',trigger: ['blur', 'change']},
				  'contactName':{type: 'string',required: true,message: '对接人名称',trigger: ['blur', 'change']},
				  'contactTelephone':[{type: 'string',required: true,message: '请输入联系电话',trigger: ['blur', 'change']},
				  {	validator: (rule, value, callback) => {
				  				return uni.$u.test.mobile(value);
				  			},message: '手机号码不正确',trigger: ['change','blur']}],
				  'loadingDate':{type: 'string',required: true,message: '装货日期',trigger: ['blur', 'change']},
				  'whetherLogisticsRequiredDou':{type: 'string',required: true,message: '安排车辆',trigger: ['blur', 'change']},
				  'warehouseName':{type: 'string',required: true,message: '请选择仓库',trigger: ['blur', 'change']},
				} ,
				BtnShow:false,//提示弹框
				requiredCaroption:[]
				
			};
		},
		
		onLoad(e) {
			console.log(JSON.parse(decodeURIComponent(e.item)),"back111");
			if(JSON.stringify(e)!=="{}"){
				let item=JSON.parse(decodeURIComponent(e.item))
				// console.log(item);
				this.getparentInfo(item)
			}
			this.dateNow=Date.now()
			// console.log(Date.now())
			this.getbackapplictaion()
			this.getreturnTypeOptions()
			this.getAdressOptions()
			this.getcarReqiured( )
			this.getOrderType()
			this.getWarehhouse()
		},
		onBackPress(){
			this.getValue()
			this.getAddress()
		},
		methods:{
			getValue(list){
				console.log(list,'B页面传递的数据')
				if(list==undefined){
					return false
				}
				this.OrderFormData.customerId=list.id
				this.OrderFormData.customerName=list.name
			   
			},
			getAddress(list){
				console.log(list,'BB');
				this.form.loadingAddress=list
			},
			// 选择地址
			addAddress(){
				// uni.navigateTo({
				// 	url:'/pages/map/map'
				// })
				var that=this
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					that.form.loadingAddress=res.address
					}
				});
			},
			// 子集添加
			async getparentInfo(e){
			 
				this.form=e
				console.log(this.requiredCaroption);
				
				// 获取关联产品
				let orderInfo=await listOrder({orderNo:e.orderNo}) 
				console.log(orderInfo);
				this.productQuantityList=orderInfo.rows[0].productList
				
				this.form.parentId=e.id
				if(e.returnType=="1"){
					this.form.returnTypeDou='回货'
				}
				const {data}=await getChildNo({parentId:e.id})
				// console.log(data);
				 this.form.returnApplyNo=data.returnApplyNo
				 
			
			},
			getReplace(arr,item){
				for(var i=0;i<arr.length;i++){
					if(arr[i].dictValue==item){
						return arr[i].dictLabel
					}
				}
			},
			// 生成回库生清单
			getbackapplictaion(){
				this.form.returnApplyNo=this.setOrderNo()
			},
			
			// 打开租赁订单弹框
			async openOrderProp(){
				this.show=5
				let res=await listOrder(this.OrderFormData)
				console.log(res);
				this.orderList=res.rows
				this.orderTotal=res.total
				
			},
			scrolltolower(){
				
				if(this.orderList.length==this.orderTotal){
					this.OrderFormData.pageNum=1
					return false
				}
				this.OrderFormData.pageNum++
				this.openOrderProp()
				
			},
			// 选择订单
			async checked(val){
				this.show=false
				console.log(val);
				this.form.orderId=val.id
				this.form.orderNo=val.orderNo
				this.form.sponsor=val.sponsor
				this.form.sponsorName=val.sponsorName
				this.form.customerId=val.customerId
				this.form.customerName=val.customerName
				this.form.totalDailyRent=val.totalDailyRent
				this.form.collaborator=val.collaborator
				this.form.collaboratorName=val.collaboratorName
				this.form.warehouseId=val.deliverWarehouseId
				this.form.warehouseName=val.deliveryWarehouseName
				this.form.salesman=val.salesman
				this.form.salesmanName=val.salesmanName
				this.form.productList=val.productList
				this.form.loadingAddress=val.address
				// address
			
				
			},
			
						//生成出库订单编号
			    setOrderNo() {
			      var date = new Date();
			      var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			      var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			      var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			      //修改月份格式
			      if (month >= 1 && month <= 9) {
			        month = "0" + month;
			      }
			      //修改日期格式
			      if (day >= 0 && day <= 9) {
			        day = "0" + day;
			      }
			
			      let round = Math.floor(Math.random() * (999 - 100)) + 100;
			      var currentFormatDate = `${year}${month}${day}`;
			      return "HKSQ" + currentFormatDate + round;
			    },
           // 获取退回货类型
		  async  getreturnTypeOptions(){
			   let res=await getDicts('return_type')
			   // console.log(res);
			   this.returnTypeOptions.push(res.data)
		   },
		   // 获取地址
		   async  getAdressOptions(){
			  let res=await provinceNameList()
			  // this.AdressOptions.push(res.rows)
			  // console.log(this.AdressOptions,'11');
			  this.adresslist= await this.getList(res.rows)
		   },
		   // 是否需要车辆
			async getcarReqiured(){
				let res=await getDicts('car_required')
				this.requiredCaroption=res.data
				this.carRequired.push(res.data)
				this.form.whetherLogisticsRequiredDou=this.getReplace(this.requiredCaroption,this.form.whetherLogisticsRequired)
			},
			// 获取仓库地址
			async getWarehhouse(){
				let res=await listWarehouse({pageSize:1000,pageNum:1})
				this.warehouseOption.push(res.rows)
			},
			// 获取租赁订单的状态
			async getOrderType(){
				let {data}=await getDicts('order_type')
				// console.log(data);
				this.orderTypeOptions=data.map((item,index)=>{
					return {name:item.dictLabel,value:item.dictValue}
				})
				
			},
			// 订单状态筛选
			selectFn(e){
				console.log(e);
				this.OrderFormData.orderStatus=e.value
				this.orderTypeShow=false
			},
			// 租赁订单查询
			async SearchOrderNo(){
				console.log('11');
				let res=await listOrder(this.OrderFormData)
				this.orderList=res.rows
			},
		    
		   checkedFn(e){
			   console.log(e);
			   if(e.value[0].dictType=='return_type'){
				  this.form.returnType=e.value[0].dictValue
				  this.form.returnTypeDou=e.value[0].dictLabel
				  console.log(this.form.returnTypeDou);
				   this.show=false
			   }
			   if(e.value[0].dictType=='car_required'){
				  this.form.whetherLogisticsRequired=e.value[0].dictValue
				  this.form.whetherLogisticsRequiredDou=e.value[0].dictLabel
				  console.log(this.form.returnTypeDou);
				   this.show=false
			   }
			   
		   },
		   // 选择仓库
		   warehouseBtn(e){
			   console.log(e);
			   this.form.warehouseId=e.value[0].id
			   this.form.warehouseName=e.value[0].warehouseName
			   this.show=false
		   },
		   async Time(e){
		   	 this.form.loadingDate=await this.getTime(e.value)
		   	 console.log(this.form.loadingDate);
		   	 this.show=false
		    },
		    getTime(val){
		    	var date = new Date(val);
		    	var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
		    	var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
		    	var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
		    	//修改月份格式
		    	if (month >= 1 && month <= 9) {
		    	  month = "0" + month;
		    	}
		    	//修改日期格式
		    	if (day >= 0 && day <= 9) {
		    	  day = "0" + day;
		    	}
		    	var currentFormatDate = `${year}-${month}-${day}`;
		    	return currentFormatDate
		    },
		   adressFn(){
		   	this.show=2
		   	this.$nextTick(()=>{
		   		this.$refs.adress.show()
		   	})
		   },
		   getList(data){
		   	data.forEach((item)=>{
		   		// console.log(item);
		   		if(item.label){
		   			item.text=item.label
		   			delete item.label
		   		}
		   		if(item.children){
		   			this.getList(item.children)
		   		}
		   	})
		   	 return data
		   },
		   async onchange(e){
			   // console.log(e);
			   this.form.loadingAddressAre=e.detail.value[2].text
			   this.form.loadingAddressCity=e.detail.value[1].text
			   this.form.loadingAddressProvince=e.detail.value[0].text
		   	let arr=[]
		   	e.detail.value.forEach((value)=>{
		   		arr.push(value.text)
		   	})
		   	this.form.loadingAddress=arr.join('')
		    this.show=false
		   },
		   
			// 返回
			backFn(){
				uni.navigateBack({
					delta:1
				})
			},
			// 数量校验
			isQuantity(val,index){
				console.log(val,index);
				console.log(this.productQuantityList);
				this.productQuantityList.forEach(item=>{
					if(item.model===val.model){
						// 校验数量
						  //和待回库数量比较
						if(Number(item.quantity)-Number(item.returnApplyQuantity)<Number(val.returnQuantity)){
							this.$refs.uToast.show({
								type:'error',
								message:`该型号待申请数量为:${Number(item.quantity)-Number(item.returnApplyQuantity)}`
							})
						     
						    this.form.productList[index].returnQuantity=null    }
					}
				})
			},
			// 提交
			 btnOkFn(){
				// 表单校验
				
				this.$refs.form.validate().then(async(res)=>{
					console.log(res);
					console.log(this.form);
					if(res){
					this.BtnShow=true
						
					}
				}).catch((error)=>{
					console.log(error);
				})
				
				
			},
			async BtnModel(){
				this.BtnShow=false
				if(this.form.parentId){
					//子级新增 +校验
				     let isChild=this.form.productList.every(item=>{
					 console.log(item.returnQuantity)
					    return item.returnQuantity===null
					          })
							  if(isChild){
								  return this.$refs.uToast.show({
									  type:'error',
									  message:'申请数量不能空'
								  })
							  }else{
								  console.log(this.form,"回货申请");
								 const res=await addBackWarehouseApi(this.form)
								 console.log(res);
								 if(res.code==200){
								 	this.$refs.uToast.show({
								 		type:'success',
								 		message:"操作成功！",
								 		complete(){
								 			uni.redirectTo({
								 				url:'/pages/backapplication/backapplication'
								 			})
								 		}
								 	})
								 } 
							  }
				}else{
					const res=await addBackWarehouseApi(this.form)
					console.log(res);
					if(res.code==200){
						this.$refs.uToast.show({
							type:'success',
							message:"操作成功！",
							complete(){
								uni.redirectTo({
									url:'/pages/backapplication/backapplication'
								})
							}
						})
					}
				}
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// 右边弹框
	.rightBox{
		min-width:300px;
		height:100%;
		.itemBox{
			height: 85px;
			padding: 10px;
			border-bottom: solid 1px #c3c3c3;
			.title{
				padding: 5px 0;
			}
		}
	}
   .form{
	   background-color: #fff;
	   padding-left: 10px;
	   padding-right: 10px;
	   
   }
   .right-list{
   	position: relative;
   	margin: 5px;
   	padding: 5px;
   	border: solid 1px #c3c3c3;
   	font-size: 12px;
   	.button{
   		position: absolute;
   		right: 10px;
   		bottom: 10px;
   	}
   }
   .box{
	   height: 200px;
	  .boxTop{
		  width: 100%;
		  display: flex;
		  justify-content: space-between;
	  } 
	  .boxValue{
		  width: 100%;
		  display: flex;
		  justify-content: space-between;
	  }
   }
   .address{
	   width: 100%;
   	position: relative;
   	.icon{
   		position: absolute;
   		right: 0;
   		bottom: 0;
   		display: inline-block;
   		width: 30px;
   		height: 30px;
   	}
   }
</style>
